<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册用户</title>
    <link th:href="@{/js/el/element.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <style>
        .myLogin {
            width: 300px;
            /*绝对定位的方式*/
            position: absolute;
            /*定位登录div的位置*/
            left: 60%;
            top: 40%;
            transform: translate(-40%, -60%);
            /*内边距*/
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
</head>
<body background="/css/img/login.jpg"
      style="background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed">
<div id="app">
    <div class="myLogin">
        <div>
            <el-input id="username" v-model="user.username" placeholder="请输入用户名">
                <template slot="prepend"><i class="el-icon-s-custom"></i></template>
            </el-input>
        </div>
        <div style="margin-top: 20px;">
            <el-input id="password" v-model="user.password" type="password" placeholder="请输入密码">
                <template slot="prepend"><i class="el-icon-unlock"></i></template>
            </el-input>
        </div>
        <div style="margin-top: 30px;">
            <el-input id="nickname" v-model="user.nickname" placeholder="请输入网名">
                <template slot="prepend"><i class="el-icon-s-custom"></i></template>
            </el-input>
        </div>
        <div style="margin-top: 40px;">
            <el-button id="add" v-on:click="submit()" style="width:100%" type="primary" plain>注册</el-button>
            <h3><a href="/public/index">返回首页</a></h3>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{}
        },
        methods:{
            submit(){
                var that = this;
                axios.post("/user/add",this.user).then(function (resp) {
                    alert(resp.data.msg);
                    window.location.href="/login/go2Login";
                })
            }
        },
        mounted:function () {
        }
    })
</script>
</html>